// /** prediction.html页面背景动画的实现
//  * 粒子是数字
//  */
// // 画布设置
// let c = document.createElement('canvas').getContext('2d');
// let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
// let canvas = c.canvas;
//
// // 效果属性
// const vertexCount = 5000; // 总顶点数
// const vertexSize = 2; // 顶点大小
// const oceanWidth = 200; // 海洋宽度
// const oceanHeight = -70; // 提高海洋高度
// const gridSize = 20; // 网格大小
// const waveSize = 30; // 波浪大小
// const perspective = 200; // 透视效果
//
// // 常用变量
// const depth = (vertexCount / oceanWidth * gridSize); // 深度计算
// let frame = 0; // 帧计数
// const { sin, cos, PI } = Math; // 数学函数
//
// // 鼠标移动变量
// let lastMouseX = null;
// let lastMouseY = null;
// let offsetX = 0;
// let offsetY = 0;
// const sensitivity = 0.1; // 鼠标移动敏感度
//
// // 顶点数组
// let vertices = [];
//
// // 气泡数组
// let bubbles = [];
//
// // 初始化画布大小
// function initCanvas() {
//     postctx.canvas.width = canvas.width = window.innerWidth;
//     postctx.canvas.height = canvas.height = window.innerHeight;
// }
//
// // 处理鼠标移动事件
// function handleMouseMove(event) {
//     if (lastMouseX !== null && lastMouseY !== null) {
//         let deltaX = event.clientX - lastMouseX;
//         let deltaY = event.clientY - lastMouseY;
//         offsetX += deltaX * sensitivity;
//         offsetY += deltaY * sensitivity;
//     }
//     lastMouseX = event.clientX;
//     lastMouseY = event.clientY;
// }
//
// // 处理窗口大小变化事件
// function handleResize() {
//     initCanvas();
// }
//
// // 生成顶点
// function generateVertices() {
//     for (let i = 0; i < vertexCount; i++) {
//         let x = i % oceanWidth;
//         let y = 0;
//         let z = i / oceanWidth >> 0;
//         let offset = oceanWidth / 2;
//         vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize, Math.random() > 0.5 ? '0' : '1']);
//     }
// }
//
// // 生成气泡
// function generateBubbles() {
//     for (let i = 0; i < 100; i++) {
//         bubbles.push({
//             x: Math.random() * canvas.width,
//             y: Math.random() * canvas.height / 2,//高度
//             radius: Math.random() * 5 + 2,
//             speed: Math.random() * 2 + 20
//         });
//     }
// }
//
// // 渲染循环
// function renderLoop(timeStamp) {
//     let rad = sin(frame / 100) * PI / 20; // Z 轴旋转角度
//     let rad2 = sin(frame / 50) * PI / 10; // X 轴旋转角度
//     const dt = (timeStamp - oldTimeStamp) / 1000; // 计算时间差
//     oldTimeStamp = timeStamp;
//
//     frame += dt * 50; // 更新帧计数
//
//     // 绘制渐变背景
//     let gradient = c.createLinearGradient(0, 0, 0, canvas.height);
//     gradient.addColorStop(0, 'hsl(200deg, 100%, 10%)');
//     gradient.addColorStop(1, 'hsl(200deg, 100%, 2%)');
//     c.fillStyle = gradient;
//     c.fillRect(0, 0, canvas.width, canvas.height);
//
//     // 绘制气泡
//     c.save();
//     c.globalAlpha = 0.5;
//     c.fillStyle = 'white';
//     bubbles.forEach(bubble => {
//         c.beginPath();
//         c.arc(bubble.x, bubble.y, bubble.radius, 0, 2 * PI);
//         c.fill();
//         bubble.y -= bubble.speed;
//         if (bubble.y < -bubble.radius) {
//             bubble.y = canvas.height / 1.8 + bubble.radius;
//             bubble.x = Math.random() * canvas.width;
//         }
//     });
//     c.restore();
//
//     c.save();
//     // 根据偏移量移动画布原点
//     c.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
//
//     c.beginPath();
//     vertices.forEach((vertex, i) => {
//         let ni = i + oceanWidth;
//         let x = vertex[0] - frame % (gridSize * 2);
//         let z = vertex[2] - frame * 2 % gridSize + (i % 2 === 0 ? gridSize / 2 : 0);
//         let wave = (cos(frame / 45 + x / 50) - sin(frame / 20 + z / 50) + sin(frame / 30 + z * x / 10000));
//         let y = vertex[1] + wave * waveSize;
//         let a = Math.max(0, 1 - (Math.sqrt(x ** 2 + z ** 2)) / depth);
//         let tx, ty, tz;
//
//         y -= oceanHeight; // 调整海洋高度
//
//         // 变换变量
//         tx = x;
//         ty = y;
//         tz = z;
//
//         // Z 轴旋转
//         tx = x * cos(rad) - y * sin(rad);
//         ty = x * sin(rad) + y * cos(rad);
//
//         x = tx;
//         y = ty;
//         z = tz;
//
//         // X 轴旋转
//         ty = y * cos(rad2) - z * sin(rad2);
//         tz = y * sin(rad2) + z * cos(rad2);
//
//         x = tx;
//         y = ty;
//         z = tz;
//
//         // 透视变换
//         x /= z / perspective;
//         y /= z / perspective;
//
//         // 忽略不可见顶点
//         if (a < 0.01) return;
//         if (z < 0) return;
//
//         // 绘制0或1粒子
//         c.globalAlpha = a;
//         c.fillStyle = `hsl(${180 + wave * 20}deg, 100%, 50%)`;
//         c.font = `${a * vertexSize * 10}px Arial`;
//         c.fillText(vertex[3], x, y);
//         c.globalAlpha = 1;
//     });
//     c.restore();
//
//     // 后处理
//     postctx.drawImage(canvas, 0, 0);
//
//     postctx.globalCompositeOperation = "screen";
//     postctx.filter = 'blur(16px)';
//     postctx.drawImage(canvas, 0, 0);
//     postctx.filter = 'blur(0)';
//     postctx.globalCompositeOperation = "source-over";
//
//     requestAnimationFrame(renderLoop);
// }
//
// // 初始化
// function init() {
//     initCanvas();
//     generateVertices();
//     generateBubbles();
//     requestAnimationFrame(renderLoop);
// }
//
// // 事件监听
// document.addEventListener('mousemove', handleMouseMove);
// window.addEventListener('resize', handleResize);
//
// // 开始渲染循环
// let oldTimeStamp = performance.now();
// init();
//
/** prediction.html页面背景动画的实现 */

// // 画布设置
// let c = document.createElement('canvas').getContext('2d');
// let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
// let canvas = c.canvas;
//
// // 效果属性
// const vertexCount = 5000; // 总顶点数
// const vertexSize = 2; // 顶点大小
// const oceanWidth = 200; // 海洋宽度
// const oceanHeight = -70; // 提高海洋高度
// const gridSize = 20; // 网格大小
// const waveSize = 30; // 波浪大小
// const perspective = 200; // 透视效果
//
// // 常用变量
// const depth = (vertexCount / oceanWidth * gridSize); // 深度计算
// let frame = 0; // 帧计数
// const { sin, cos, PI } = Math; // 数学函数
//
// // 鼠标移动变量
// let lastMouseX = null;
// let lastMouseY = null;
// let offsetX = 0;
// let offsetY = 0;
// const sensitivity = 0.1; // 鼠标移动敏感度
//
// // 顶点数组
// let vertices = [];
//
// // 气泡数组
// let bubbles = [];
//
// // 初始化画布大小
// function initCanvas() {
//     postctx.canvas.width = canvas.width = window.innerWidth;
//     postctx.canvas.height = canvas.height = window.innerHeight;
// }
//
// // 处理鼠标移动事件
// function handleMouseMove(event) {
//     if (lastMouseX !== null && lastMouseY !== null) {
//         let deltaX = event.clientX - lastMouseX;
//         let deltaY = event.clientY - lastMouseY;
//         offsetX += deltaX * sensitivity;
//         offsetY += deltaY * sensitivity;
//     }
//     lastMouseX = event.clientX;
//     lastMouseY = event.clientY;
// }
//
// // 处理窗口大小变化事件
// function handleResize() {
//     initCanvas();
// }
//
// // 生成顶点
// function generateVertices() {
//     for (let i = 0; i < vertexCount; i++) {
//         let x = i % oceanWidth;
//         let y = 0;
//         let z = i / oceanWidth >> 0;
//         let offset = oceanWidth / 2;
//         vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize, Math.random() > 0.5 ? '0' : '1']);
//     }
// }
//
// // 生成气泡
// function generateBubbles() {
//     for (let i = 0; i < 100; i++) {
//         bubbles.push({
//             x: Math.random() * canvas.width,
//             y: Math.random() * canvas.height / 2,
//             radius: Math.random() * 5 + 2,
//             speed: Math.random() * 2 + 20
//         });
//     }
// }
//
// // 渲染海洋粒子
// function renderOcean() {
//     let rad = sin(frame / 100) * PI / 20; // Z 轴旋转角度
//     let rad2 = sin(frame / 50) * PI / 10; // X 轴旋转角度
//
//     c.save();
//     // 根据偏移量移动画布原点
//     c.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
//
//     c.beginPath();
//     vertices.forEach((vertex, i) => {
//         let ni = i + oceanWidth;
//         let x = vertex[0] - frame % (gridSize * 2);
//         let z = vertex[2] - frame * 2 % gridSize + (i % 2 === 0 ? gridSize / 2 : 0);
//         let wave = (cos(frame / 45 + x / 50) - sin(frame / 20 + z / 50) + sin(frame / 30 + z * x / 10000));
//         let y = vertex[1] + wave * waveSize;
//         let a = Math.max(0, 1 - (Math.sqrt(x ** 2 + z ** 2)) / depth);
//         let tx, ty, tz;
//
//         y -= oceanHeight; // 调整海洋高度
//
//         // 变换变量
//         tx = x;
//         ty = y;
//         tz = z;
//
//         // Z 轴旋转
//         tx = x * cos(rad) - y * sin(rad);
//         ty = x * sin(rad) + y * cos(rad);
//
//         x = tx;
//         y = ty;
//         z = tz;
//
//         // X 轴旋转
//         ty = y * cos(rad2) - z * sin(rad2);
//         tz = y * sin(rad2) + z * cos(rad2);
//
//         x = tx;
//         y = ty;
//         z = tz;
//
//         // 透视变换
//         x /= z / perspective;
//         y /= z / perspective;
//
//         // 忽略不可见顶点
//         if (a < 0.01) return;
//         if (z < 0) return;
//
//         // 绘制0或1粒子
//         c.globalAlpha = a;
//         c.fillStyle = `hsl(${180 + wave * 20}deg, 100%, 50%)`;
//         c.font = `${a * vertexSize * 10}px Arial`;
//         c.fillText(vertex[3], x, y);
//         c.globalAlpha = 1;
//     });
//     c.restore();
// }
//
// // 渲染气泡
// function renderBubbles() {
//     c.save();
//     c.globalAlpha = 0.5;
//     c.fillStyle = 'white';
//     bubbles.forEach(bubble => {
//         c.beginPath();
//         c.arc(bubble.x, bubble.y, bubble.radius, 0, 2 * PI);
//         c.fill();
//         bubble.y -= bubble.speed;
//         if (bubble.y < -bubble.radius) {
//             bubble.y = canvas.height / 1.8 + bubble.radius;
//             bubble.x = Math.random() * canvas.width;
//         }
//     });
//     c.restore();
// }
//
// // 渲染循环
// function renderLoop(timeStamp) {
//     const dt = (timeStamp - oldTimeStamp) / 1000; // 计算时间差
//     oldTimeStamp = timeStamp;
//
//     frame += dt * 50; // 更新帧计数
//
//     // 绘制渐变背景
//     let gradient = c.createLinearGradient(0, 0, 0, canvas.height);
//     gradient.addColorStop(0, 'hsl(200deg, 100%, 10%)');
//     gradient.addColorStop(1, 'hsl(200deg, 100%, 2%)');
//     c.fillStyle = gradient;
//     c.fillRect(0, 0, canvas.width, canvas.height);
//
//     // 渲染气泡
//     renderBubbles();
//
//     // 渲染海洋粒子
//     renderOcean();
//
//     // 后处理
//     postctx.drawImage(canvas, 0, 0);
//
//     postctx.globalCompositeOperation = "screen";
//     postctx.filter = 'blur(16px)';
//     postctx.drawImage(canvas, 0, 0);
//     postctx.filter = 'blur(0)';
//     postctx.globalCompositeOperation = "source-over";
//
//     requestAnimationFrame(renderLoop);
// }
//
// // 触发生成气泡
//
// function predictStock() {
//     generateBubbles();
// }
//
// // 初始化
// function init() {
//     initCanvas();
//     generateVertices();
//     requestAnimationFrame(renderLoop);
// }
//
// // 事件监听
// document.addEventListener('mousemove', handleMouseMove);
// window.addEventListener('resize', handleResize);
//
// // 开始渲染循环
// let oldTimeStamp = performance.now();
// init();
/** prediction.html页面背景动画的实现 */

// 画布设置
let c = document.createElement('canvas').getContext('2d');
let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
let canvas = c.canvas;
let num=100;

// 效果属性
const vertexCount = 5000; // 总顶点数
const vertexSize = 2; // 顶点大小
const oceanWidth = 200; // 海洋宽度
const oceanHeight = -70; // 提高海洋高度
const gridSize = 20; // 网格大小
const waveSize = 30; // 波浪大小
const perspective = 200; // 透视效果

// 常用变量
const depth = (vertexCount / oceanWidth * gridSize); // 深度计算
let frame = 0; // 帧计数
const { sin, cos, PI } = Math; // 数学函数

// 鼠标移动变量
let lastMouseX = null;
let lastMouseY = null;
let offsetX = 0;
let offsetY = 0;
const sensitivity = 0.1; // 鼠标移动敏感度

// 顶点数组
let vertices = [];

// 气泡数组
let bubbles = [];

// 初始化画布大小
function initCanvas() {
    postctx.canvas.width = canvas.width = window.innerWidth;
    postctx.canvas.height = canvas.height = window.innerHeight;
}

// 处理鼠标移动事件
function handleMouseMove(event) {
    if (lastMouseX !== null && lastMouseY !== null) {
        let deltaX = event.clientX - lastMouseX;
        let deltaY = event.clientY - lastMouseY;
        offsetX += deltaX * sensitivity;
        offsetY += deltaY * sensitivity;
    }
    lastMouseX = event.clientX;
    lastMouseY = event.clientY;
}

// 处理窗口大小变化事件
function handleResize() {
    initCanvas();
}

// 生成顶点
function generateVertices() {
    for (let i = 0; i < vertexCount; i++) {
        let x = i % oceanWidth;
        let y = 0;
        let z = i / oceanWidth >> 0;
        let offset = oceanWidth / 2;
        vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize, Math.random() > 0.5 ? '0' : '1']);
    }
}

// 生成气泡函数
function generateBubbles(count) {
    for (let i = 0; i < count; i++) {
        bubbles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height / 2,//生成高度
            radius: Math.random() * 5 + 2,
            speed: Math.random() * 2 + 20
        });
    }
}
//初始生成0个气泡
generateBubbles(0)
// 渲染海洋粒子
function renderOcean() {
    let rad = sin(frame / 100) * PI / 20; // Z 轴旋转角度
    let rad2 = sin(frame / 50) * PI / 10; // X 轴旋转角度

    c.save();
    // 根据偏移量移动画布原点
    c.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);

    c.beginPath();
    vertices.forEach((vertex, i) => {
        let ni = i + oceanWidth;
        let x = vertex[0] - frame % (gridSize * 2);
        let z = vertex[2] - frame * 2 % gridSize + (i % 2 === 0 ? gridSize / 2 : 0);
        let wave = (cos(frame / 45 + x / 50) - sin(frame / 20 + z / 50) + sin(frame / 30 + z * x / 10000));
        let y = vertex[1] + wave * waveSize;
        let a = Math.max(0, 1 - (Math.sqrt(x ** 2 + z ** 2)) / depth);
        let tx, ty, tz;

        y -= oceanHeight; // 调整海洋高度

        // 变换变量
        tx = x;
        ty = y;
        tz = z;

        // Z 轴旋转
        tx = x * cos(rad) - y * sin(rad);
        ty = x * sin(rad) + y * cos(rad);

        x = tx;
        y = ty;
        z = tz;

        // X 轴旋转
        ty = y * cos(rad2) - z * sin(rad2);
        tz = y * sin(rad2) + z * cos(rad2);

        x = tx;
        y = ty;
        z = tz;

        // 透视变换
        x /= z / perspective;
        y /= z / perspective;

        // 忽略不可见顶点
        if (a < 0.01) return;
        if (z < 0) return;

        // 绘制0或1粒子
        c.globalAlpha = a;
        c.fillStyle = `hsl(${180 + wave * 20}deg, 100%, 50%)`;
        c.font = `${a * vertexSize * 10}px Arial`;
        c.fillText(vertex[3], x, y);
        c.globalAlpha = 1;
    });
    c.restore();
}

// 渲染气泡
function renderBubbles() {
    c.save();
    c.globalAlpha = 0.5;
    c.fillStyle = 'white';
    bubbles.forEach(bubble => {
        c.beginPath();
        c.arc(bubble.x, bubble.y, bubble.radius, 0, 2 * PI);
        c.fill();
        bubble.y -= bubble.speed;
        if (bubble.y < -bubble.radius) {
            bubble.y = canvas.height / 1.8 + bubble.radius;
            bubble.x = Math.random() * canvas.width;
        }
    });
    c.restore();
}

// 渲染循环
function renderLoop(timeStamp) {
    const dt = (timeStamp - oldTimeStamp) / 1000; // 计算时间差
    oldTimeStamp = timeStamp;

    frame += dt * 50; // 更新帧计数

    // 绘制渐变背景
    let gradient = c.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, 'hsl(200deg, 100%, 10%)');
    gradient.addColorStop(1, 'hsl(200deg, 100%, 2%)');
    c.fillStyle = gradient;
    c.fillRect(0, 0, canvas.width, canvas.height);

    // 渲染气泡
    renderBubbles();

    // 渲染海洋粒子
    renderOcean();

    // 后处理
    postctx.drawImage(canvas, 0, 0);

    postctx.globalCompositeOperation = "screen";
    postctx.filter = 'blur(16px)';
    postctx.drawImage(canvas, 0, 0);
    postctx.filter = 'blur(0)';
    postctx.globalCompositeOperation = "source-over";

    requestAnimationFrame(renderLoop);
}

// 初始化
function init() {
    initCanvas();
    generateVertices();
    generateBubbles();
    requestAnimationFrame(renderLoop);
}

// 事件监听
document.addEventListener('mousemove', handleMouseMove);
window.addEventListener('resize', handleResize);
/**点击预测背景发生变化
 * */
function predictStock_one(){
    generateBubbles(100)//气泡数变为100
    document.getElementById('content').style.display = 'none';
    document.getElementById('overlay').style.display = 'block';

    const progressMessages = [
        'Sending request',
        'Retrieving historical data',
        'Building model'
    ];

    let currentMessageIndex = 0;
    const progressDiv = document.getElementById('progress');

    function updateProgress() {
        if (currentMessageIndex < progressMessages.length) {
            const message = document.createElement('p');
            message.className = 'bubble';
            message.innerHTML = progressMessages[currentMessageIndex];
            progressDiv.appendChild(message);
        if(currentMessageIndex < progressMessages.length){
            setTimeout(() => {
                const successMessage = document.createElement('p');
                successMessage.className = 'bubble';
                successMessage.innerHTML = 'Success  √';
                progressDiv.appendChild(successMessage);
                currentMessageIndex++;
                setTimeout(updateProgress, 1500); // 模拟每个步骤需要1秒钟
            }, 2000); // 每个步骤显示1秒后显示 "Success"
        }

        }
    }
    updateProgress();

    setTimeout(() => {
        // // 创建并添加 Loading 文本和动态省略号
        // const dots = document.createElement('div');
        // dots.innerHTML = 'Running<span class="dots"></span>';
        // document.getElementById('progress').appendChild(dots);
        // 创建并添加 Loading 文本
        const loadingText = document.createElement('div');
        loadingText.className = 'bubble';
        loadingText.innerHTML = 'Predicting ';
        document.getElementById('progress').appendChild(loadingText);

        // 0.5秒后添加动态省略号
        setTimeout(function() {
            const dots = document.createElement('span');
            dots.className = 'dots';
            loadingText.appendChild(dots);
        }, 1000);
    }, 10000); //
}

// 开始渲染循环
let oldTimeStamp = performance.now();
init();

